<template>
	<gracePage headerBG="#1CA376" statusBarBG="#1CA376" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34 grace-white" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center">
					<text class="grace-h4 text-center font-size-36 grace-white" style="font-size:36rpx;">我的礼包</text>
				</view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<view slot="gBody">
			<view class="grace-flex-center" style="background-color: #1CA376;">
				<view class="grace-space-between grace-flex-vcenter my-box">
					<view class="" style="">
						<view style="font-size:28rpx;color: #E6E6E6;">可用礼包</view>
						<view style="font-size:66rpx;" class="grace-white text-center">{{userInfo.club_card}}席</view>
						<text class="my-text-1" @click="toNavigateTo('/pages/suit/suitList/suitList')">去使用</text>
					</view>
					<view style="height: 100rpx;border: 1rpx solid #E6E6E6;"></view>
					<view class="" style="">
						<view style="font-size:28rpx;color: #E6E6E6;">已用礼包</view>
						<view style="font-size:66rpx;" class="grace-white text-center">{{userInfo.club_card_used}}席</view>
						<text class="my-text-1 grace-gray" style="border: 1rpx solid #A5A7B2;">看详情</text>
					</view>
				</view>
			</view>
			<view class="grace-card-view">
				<view class="grace-h4">使用规则</view>
				<view class="pt-4" style="color: #5A5A5A;">1、该折扣卡仅限实名认证用户方可认购和使用，折扣卡数量有限，先到先得，请以页面提示为准；</view>
				<view style="color: #5A5A5A;">
					2、该折扣卡仅支持通过购卡城市支付宝电子公交卡,乘车付费时按照乘车实际订单金额*折扣卡乘车票价优惠折扣进行优惠，优惠金额不超过封顶金额，封顶金额见页面（认购金额及优惠后的实际车资需另行支付），详细优惠次数及优惠金额以页面展示为准；优惠不可拆分、提现、转赠、代付等，逾期未使用将自动作废。
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			oneGoStatus:true,
		};
	},
 computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onLoad(e) {},
	methods: {
		toNavigateTo(url){
			if(this.oneGoStatus){
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
	},
	components: { gracePage }
};
</script>
<style scoped>
.my-box {
	height: 400rpx;
	width: 500rpx;
}
.my-text-1 {
	border: 1px solid #ffffff;
	width: 136rpx;
	height: 42rpx;
	line-height: 42rpx;
	display: block;
	margin-top: 30rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
	border-radius: 30rpx;
}
</style>
